<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template #left>
          <van-icon name="newspaper-o" size="0.53rem" color="#fff" />
          <span class="tetx">头条</span>
        </template>
        <template #right>
          <van-icon
            name="search"
            size="0.53rem"
            color="#fff"
            @click="searchFn"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- tap蓝 -->
    <div class="top">
      <van-tabs
        v-model="channelID"
        animated
        sticky
        offset-top="1.2266667rem"
        @change="TabFn"
      >
        <van-tab
          :title="item.name"
          v-for="item in userList"
          :key="item.id"
          :name="item.id"
        >
          <ArticleLite :ID="channelID"></ArticleLite>
        </van-tab>
      </van-tabs>
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      />
    </div>
    <!-- 频道管理 -->
    <van-popup v-model="show" get-container="body" class="channel_popup">
      <Channelpopup
        :userLists="userList"
        :selected="unexposedChannel"
        @addEdit="addEditFn"
        @goHomes="remoF"
        @removeEV="removeFn"
        v-model="channelID"
      ></Channelpopup>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  setTheChannelAPI,
  deleteTheSpecifiedChannelAPI
} from '@/api/index.js'
import ArticleLite from '@/components/ArticleLite.vue'
import Channelpopup from '@/components/channelpopup.vue'
export default {
  name: 'home',
  data() {
    return {
      channelID: 0,
      userList: [],
      allList: [],
      show: false,
      channelScrollTop: {}
    }
  },
  methods: {
    TabFn() {
      if (this.channelScrollTop[this.channelID] === undefined) return
      console.log(this.channelScrollTop[this.channelID]);
      setTimeout(() => {
        document.documentElement.scrollTop = this.channelScrollTop[this.channelID]
      },1)
      
    },
    searchFn() {
      this.$router.push('/search')
    },
    async removeFn(e) {
      let index = this.userList.findIndex(item => e.id === item.id)
      this.userList.splice(index, 1)
      await deleteTheSpecifiedChannelAPI(e.id)
    },
    remoF() {
      this.show = false
    },
    async addEditFn(e) {
      this.userList.push(e)
      await setTheChannelAPI(this.userList)
    },
    showPopup() {
      this.show = true
    }
  },
  async created() {
    const { data: res } = await getUserChannelsAPI()
    this.userList = res.data.channels
    //获取所有频道
    const { data: ress } = await getAllChannelsAPI()
    this.allList = ress.data.channels
  },
  components: {
    ArticleLite,
    Channelpopup
  },
  computed: {
    unexposedChannel() {
      let newArr = this.allList.filter(item => {
        let index = this.userList.findIndex(items => {
          return items.id === item.id
        })
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  activated() {
    // console.log(this.$route.meta.scroll)
    window.addEventListener('scroll', () => {
      setTimeout(() => {
        this.channelScrollTop[this.channelID] =
          document.documentElement.scrollTop
      }, 0)
    })
    document.documentElement.scrollTop = this.$route.meta.scroll
  },
  deactivated() {
    window.removeEventListener('scroll', () => {
      this.$route.meta.scroll = document.documentElement.scrollTop
    })
  }
}
</script>

<style lang="less" scoped>
/deep/.tetx {
  color: #fff;
  margin-left: 10px;
  font-size: 17px;
}

/deep/.top {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 56px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  background: #ffffff;
  width: 100vw;
  height: 100vh;
}
</style>
